<template>
  <div>
    <el-form :model="formData" label-width="90px" :rules="FormRules" ref="addForm">
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入菜单名称"></el-input>
      </el-form-item>
      <el-form-item label="英文编码" prop="code">
        <el-input v-model="formData.code" placeholder="请输入菜单名称"></el-input>
      </el-form-item>
      <el-form-item label="父级菜单">
        <!-- <el-select v-model="formData.pid" placeholder="父级菜单，若无可以不选" filterable >
          <el-option
            v-for="item in options"
            :key="item.pid"
            :label="item.name"
            :value="item.pid"
          ></el-option>
        </el-select>-->
        <el-cascader
          :options="options"
          :props="{ checkStrictly: true,label:'name',value:'menuId',children:'sonMenu' }"
          clearable
          :show-all-levels="false"
          v-model="formData.pid"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="页面菜单">
        <el-select v-model="formData.newPageFlag" placeholder="是否是页面菜单">
          <el-option label="是" value="Y"></el-option>
          <el-option label="否" value></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单地址" prop="url">
        <el-input v-model="formData.url" placeholder="请输入菜单地址"></el-input>
      </el-form-item>

      <el-form-item label="菜单描述" prop="description">
        <el-input
          v-model="formData.description"
          placeholder="请输入菜单描述"
          maxlength="50"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input type="number" v-model="formData.sort" placeholder="请输入公司排序的数字"></el-input>
      </el-form-item>
      <el-form-item label="开关状态">
        <el-radio-group v-model="formData.status">
          <el-radio label="Y">开启</el-radio>
          <el-radio label="N">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handSave()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  menuAdd,
  menuEdit,
  menuList,
  selectMenuFSTreeList
} from "../../../api/baseSetting";
export default {
  data() {
    var checkSort = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入排序"));
      }
      if (!Number.isInteger(value * 1)) {
        callback(new Error("请输入数字值"));
      } else {
        callback();
      }
    };
    return {
      formData: {
        name: "",
        code: "",
        url: "",
        description: "",
        pid: "",
        sort: "",
        status: "",
        newPageFlag: "" //是否是侧边栏菜单
      },
      FormRules: {
        name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        url: [{ required: true, message: "请输入菜单地址", trigger: "blur" }],
        code: [{ required: true, message: "请输入菜单编码", trigger: "blur" }],
        description: [
          { required: true, message: "请输入公司描述", trigger: "blur" },
          { max: 50, message: "长度小于50 个字符", trigger: "blur" }
        ],
        sort: [{ required: true,validator: checkSort, trigger: "blur" }],

      },
      options: [] //父级菜单
    };
  },
  props: {
    sendFormData: {
      num: {
        type: Object
      }
    }
  },
  methods: {
    //点击保存
    handSave() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          var formData = this.formData;
          var data = {
            menuId: formData.menuId,
            name: formData.name,
            code: formData.code,
            url: formData.url,
            description: formData.description,
            sort: formData.sort,
            status: formData.status,
            // pcode: formData.pidString.split(",")[0],
            // pid: formData.pidString.split(",")[1],
            // pid:formData.pid,
            // levels: formData.pidString ? 2 : 1,
            menuFlag: formData.pidString ? "N" : "Y",
            newPageFlag: formData.newPageFlag
          };
          if (formData.pid && formData.pid[0]) {
            // data.pid = formData.pid[0]
            let num = formData.pid.length;
            data.pid = formData.pid[num - 1];
          }
          if (this.sendFormData.menuId) {
            //编辑
            menuEdit(data).then(res => {
              this.$message({
                message: "成功",
                type: "success"
              });
              this.$store.commit("setCompanyList", []);
              this.$emit("hideTotas");
            });
          } else {
            //新增
            menuAdd(data).then(res => {
              this.$message({
                message: "成功",
                type: "success"
              });
              this.$store.commit("setCompanyList", []);
              this.$emit("hideTotas");
            });
          }
        }
      });
    },
    //获取父菜单
    getTree() {
      selectMenuFSTreeList({}).then(res => {
        var list = res;
        // var list = options.filter(function(item) {
        //   return item.levels == 1;
        // });
        this.options = list;
        if(this.formData.menuId){
          this.getFormatData(list);
        }
      });
    },
    //将数据弄成插件的格式化
    getFormatData(list){
      let pid = this.sendFormData.pid
      let arr = [];
      let that = this;
      for(let i = 0;i<list.length;i++){
        if(pid == list[i].menuId){
          arr.push(list[i].menuId)
          this.formData.pid = arr;
          break
        }
        if(list[i].sonMenu && list[i].sonMenu.length>0){
          function getData(list2,dataArr){
            for(let a=0;a<list2.length;a++){
              if(list2[a].menuId == pid){
                dataArr.push(list2[a].menuId);
                that.formData.pid = dataArr;
                break;
              }
              if(list2[a].sonMenu && list2[a].sonMenu.length>0){
                let newArr = [...dataArr,list2[a].menuId]
                getData(list2[a].sonMenu,newArr)
              }
            }
          }
          getData(list[i].sonMenu,[list[i].menuId])
        }
      }
    }
  },
  created() {
    this.getTree();
  },
  mounted() {
    if (this.sendFormData.menuId) {
      var data = this.sendFormData;
      // console.log(data);
      let list = this.options;

      this.formData = {
        menuId: data.menuId,
        name: data.name,
        code: data.code,
        url: data.url,
        description: data.description,
        // pidString: data.pcode && data.pid ? data.pcode + "," + data.pid : "",
        pid: data.pid == 0 ? "" : [data.pid],
        sort: data.sort,
        status: data.status,
        newPageFlag: data.newPageFlag || ""
      };
    } else {
      for (var i in this.formData) {
        this.formData[i] = "";
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>
